<template>
	<div style="width:1405px ;margin-top: 10px;background-color:#F5F5F5 ;" >
			  <div class="block text-center" style="margin-top: -10px;width:1410px">
			    <el-carousel height="300px">
			      <el-carousel-item v-for="item in imgList" :key="item">
			        <h3 class="small justify-center" text="2xl">
						<img :src="item" style="height: 300;width:866px;margin-left: -324px;">
					</h3>
			      </el-carousel-item>
			    </el-carousel>
			  </div>
			<el-row :gutter="20">
			   <el-col :span="18">
				   <!-- 搜索栏 -->
				   <div style="width: 865px;height: 40px;margin-left: 110px; background-color:#FFFFFF;">
				      <span>我的歌单</span>
					</div>
			<!-- 表格 -->
				<el-table :data="tableData" style="width:865px;margin-left: 110px;" >
				       <el-table-column prop="date"  width="400" #default="scope" >
				   <div >
				   	<el-button type="text">
				   		<!--   头像 -->
				   
				   		<div class="demo-type" style="margin-top: 20px;">
				   			<el-button type="text" @click="yonghu(scope.row)">
				   				<el-avatar :size="30" src="https://empty" @error="errorHandler">
				   					<img :src="scope.row.user_img">
				   				</el-avatar>
				   			</el-button>
				   		</div>
				   	</el-button>
				   
				   	<div style="margin-top:-30px;margin-left:35px; height: 5px;">
				   		<el-button type="text"
				   			@click="gequ(scope.row)">{{scope.row.music_author}}—{{scope.row.music_name}}
				   		</el-button>
				   	</div>
				   	<div style="margin-top:20px;margin-left:35px;">
				   		{{scope.row.music_user_name}}—{{scope.row.music_time}}
				   	</div>
				   </div>
					   </el-table-column>
					   
					 <!--  表格右边的浏览量 -->
				       <el-table-column prop="name" width="400" #default="scope">
				       	<div style="color:aliceblue;
				               margin-top:14px;margin-left:300px;height:20px;width:40px
				               text-align: center;
				       		color: #88B9F9;
				       		">
				       		<svg style="margin-left: -30px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
				       			fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
				       			<path
				       				d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
				       		</svg>
				       		{{scope.row.music_tu}}
				       		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
				       			class="bi bi-star" viewBox="0 0 16 16">
				       			<path
				       				d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
				       		</svg>
				       		{{scope.row.music_sc}}
				       	</div>
				       </el-table-column>
				    </el-table>
					
			
					
					<!-- 分页 -->
					<div style="margin-left: 110px;background-color: white;width:865px ;height: 40px;">
						<el-pagination style="margin-left: 300px;"
						    v-model:current-page="page.pageNum"
							v-model:page-size="page.pageSize"
						
							layout="total, prev, pager, next, jumper"
						  :total="page.total"
						  @click="doList"
						  />
					</div>
		           <div class="grid-content ep-bg-purple"></div>
				</el-col>
			   
			   <el-col :span="6" style="margin-left: -90px;">
				   <div style="background-color: aqua;width: 300px;height: 300px;margin-top: -300px;">
					   <img src="../../../assets/gg.png" style="height: 300px;width: 300px;" >
				   </div>
				 <!--  广告栏 -->
				   <div style="width: 300px;height:190px;margin-bottom: 10px;background-color: white;">
					  <div style="margin-left: 10px;height: 10px;"></div>
					  <div style="width: 240px;margin-left: 30px;background-color: #312A2A;height: 70px; border-radius: 15px;">
						  <div style="height: 16px;width: 240px;"></div>
						  <div style="color:#E2C2B9;margin-left: 20px;">
							  黑胶vip</div>
							  <div style="color:#E2C2B9;margin-left: 120px;margin-top: -20px;">
								
							    <el-popover placement="right" :width="400" trigger="click">
							        <template style="height: 500px;width:500px;" #reference>
							        <el-button style="background-color:#E2C2B9;height:26px;width: 70px;margin-left: 20px;" round>优惠购买</el-button>
							        </template>
									<el-row>
										<el-col :span="10">
										<img src="../../assets/gg.png" style="width: 200px;height: 200px;">
										</el-col>
									    <el-col :span="6">
											
										</el-col>
										<el-col :span="4">
											<div>588/1年</div>
										</el-col>
									</el-row>
									
							    </el-popover>
								
							</div>
							<div style="color: #E2C2B9;font-size: 12px;
							margin-left: 20px;">立享21项特权</div>
						  </div>
						  <div style="height: 16px;width: 240px;margin-top: 20px;
						  margin-left: 30px;
						  color: #666666;font-size: 14px">
							  登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
							  </div>
							  <div style="margin-top: 30px;margin-left: 110px;">
								  <el-button style="background-color:#E2C2B9;height:30px;width: 70px;" @click="showLoginPage" round>用户登录</el-button>
							  </div>
					</div>
					
				   
				    
				   <div  style="width: 300px;background-color:white;" >
					   <div style="width: 280px;height: 120px;background-color:white;margin-left: 10px;">
						   HiFiNi 是一个由音乐爱好者维护的分享平台, 旨在解决问题互帮互助, 如果您有需求, 请注册账号并发布信息、详细描述歌曲信息等, 我们会尽力帮您寻找
						   HiFiNi MUSIC BBS - HiFiNi.COM
					   </div>
				   </div>
				   
				   <div style="width: 300px;height:40px;background-color:white;margin-bottom: -5px;margin-top: 2px;">
					  <div style="margin-left:-190px;text-align: center;">主题数</div>
					  <div style="margin-left:-190px; height: 5px;text-align: center;">
					  	32
					  </div>
					  <div style="margin-top:-26px;text-align: center;">帖子数</div>
					  <div style=" height: 5px;text-align: center;">
					  	{{tez}}
					  </div>
					  <div style="margin-left:190px;margin-top:-26px;text-align: center;">今日主题</div>
					  <div style="margin-left:190px; height: 5px; text-align: center;">
					  	32
					  </div>
				   </div>
				    <el-input
					  style="margin-top:10px;width: 230px"
				       v-model="input"
				       placeholder="关键词"
				      :prefix-icon="Search"
				     />
					 <el-button style="margin-top:10px;width: 70px;" type="primary">搜索</el-button>
					  <div style="height:15px">
					</div>
				   
				   <div style="height: 320px;width:300px;background-color:white;">
					   
	             
				   </div>  
				</el-col>
			 </el-row>
		</div>
		
	
	<!-- 发贴 top="2vh"是顶部距离 v-model="addDialogVisible"用来绑定是否开启弹窗-->
		
		 	<add-page ref="addDialogVisible">
		 	</add-page>
	       
			<login-page ref="loginPageRef"></login-page>
	
</template>

<script setup>
	import { Search } from '@element-plus/icons-vue'
	    import { nextTick, onMounted, ref } from 'vue';
		import { UserFilled } from '@element-plus/icons-vue'
		import axios from 'axios';
		
		const input = ref(''); 
		
		const tez=ref('');
		
		const song = ref({
			form_Name:'',
			
		});
		//用来测试
		function u(m){
			alert(m);
		};
		
		//跳转
		function yonghu(m) {
			location.href = "/pagesIndex/yongHu?user_id=" + m.music_user_id;
		};
		
		function gequ(t) {
			location.href = "/pagesIndex/play?m=" + t.music_id + "&t=" + encodeURIComponent(t.user_img) + "&n=" + encodeURIComponent(t.music_user_name);
		}
		
		// 分页条件
		const page=ref({
			 //第几页
			 pageNum:1,
			//一共多少页
		    pages:0,
		    //一共多少条
			total:0,
			//一页多少行
			pageSize:10
		 });
		 
		 //重置分页查询
		const doPageReset=()=>{
			page.value.pageNum=1;
			page.value.pageSize=10;
		}
		
		// 表格数据展现
	const tableData =ref([
	  
	]);
	 const imgList=ref([
		 '../src/assets/logo1.png',
		 '../src/assets/logo2.png',
		 '../src/assets/logo3.png',
	 ]);
	 
	 const user=ref({
		 
	 });
	 
		const music=ref({
			 music_type:"",
			 music_date:"",
			 music_time:"",
			 music_rm:"",
			 music_sc:"",
			 music_tu:"",
			 music_zhou:"",
		});
	 //查询
	 const doList = ()=>{
		
		
		
	 	axios({
	 		url:'/api/music/gedan',
	 		method:'GET',
	 		params: Object.assign({},song.value,{pageNum:page.value.pageNum,pageSize:page.value.pageSize})
	 	}).then(response => {
	 		// console.log(response.data)
	 
	 		tableData.value = response.data.list;
			tableData.value.forEach(item => {
				item.user_img ="../src/assets/" +item.user_img;
			});
			console.log(tableData.value);
	 		// 分页信息
	 		page.value.pages = response.data.pages;
			page.value.total = response.data.total;
	 		if(tez.value==''){
				tez.value=response.data.total;
			};
			console.log(response.data.total);
	 	});
	 };
	 

	 //--------------------------- 发贴框 ---------------------------
	 const addDialogVisible = ref();
	 const showAddDialog = ()=>{
	 	addDialogVisible.value.handleAddForm();
	 }
	 
	 //--------------------------- 登录框 ---------------------------
	 const loginPageRef = ref();
	 const showLoginPage = ()=>{
	 	loginPageRef.value.handleLoginForm();
	 }
	 
	 //刷新页面
	 const doFlushPage = ()=>{
		
	 	doList();
	 }
	 
	 onMounted(()=>{
		let start = location.href.lastIndexOf("=") + 1;
		song.value.form_Name = decodeURI(location.href.substring(start));
		 
		 
		 doList();
	 });
</script>

<style scoped>
	#m2{
		height: 300px;
	    position: relative;
	}
	
	#m2 img{
		width:1170px;
		height: 100%;
		float: left;
		display: none;
	}
	
	#m2 img:first-child{
		display: block;
	}
	#ss-hover{
		
	}
	.el-row {
	  margin-bottom: 20px;
	}
	.el-row:last-child {
	  margin-bottom: 0;
	}
	.el-col {
	  border-radius: 4px;
	}
	
	.grid-content {
	  border-radius: 4px;
	  min-height: 36px;
	}
	.demonstration {
	  color: var(--el-text-color-secondary);
	}
	
	.el-carousel__item h3 {
	  color: #475669;
	  opacity: 0.75;
	  line-height: 150px;
	  margin: 0;
	  text-align: center;
	}
	
	.el-carousel__item:nth-child(2n) {
	  background-color: #99a9bf;
	}
	
	.el-carousel__item:nth-child(2n + 1) {
	  background-color: #d3dce6;
	}
</style>